blob: 1e76d65150d9b03efd061b0c6e4590cb84c7237a (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
|
import { useRouter } from "next/router";
import { GetServerSideProps } from "next";
import "../../app/globals.css";
import TitleBar from "../../components/TitleBar/TitleBar";
import { ChannelCard } from "@/components/channel-card";
import DataChart from "@/components/DataChart/DataChart";
interface ChannelDataProp {
channel_name: string;
profile_pic: string;
subscribers: number;
sub_org: string;
video_count: number;
next_milestone: string;
days_until_next_milestone: string;
next_milestone_date: string;
}
interface GraphDataProp{
labels: string[];
datasets: number[];
}
export const getServerSideProps: GetServerSideProps = async (context) => {
const { slug } = context.params || {};
const chartData = await getGraphData(slug as string);
const channelData = await getChannelData(slug as string);
return {
props: {
chartData,
channelData,
slug
},
};
};
function Page({ chartData, channelData, slug }: { chartData: GraphDataProp, channelData: ChannelDataProp, slug: string }) {
return (
<>
<TitleBar title={slug as string} redirectUrl="/" showHomeButton backgroundColor="black" />
<div className="flex justify-center">
<div className="flex flex-col items-center">
<ChannelCard
name={channelData.channel_name}
avatarUrl={channelData.profile_pic}
subscriberCount={channelData.subscribers}
videoCount={channelData.video_count}
suborg={channelData.sub_org}
nextMilestone={channelData.next_milestone}
nextMilestoneDays={channelData.days_until_next_milestone}
nextMilestoneDate={channelData.next_milestone_date}
/>
</div>
</div>
<div className="px-48 mb-10 mt-10">
<div className="mb-12">
<DataChart channel_name={slug as string} chartData={chartData}/>
</div>
</div>
</>
);
}
async function getGraphData(slug: string){
const encodedSlug = encodeURIComponent(slug as string);
const apiUrl = process.env.NEXT_PUBLIC_API_URL
const response = await fetch(apiUrl+`/api/subscribers/${encodedSlug}`, {
headers: {
'Cache-Control': 'no-cache'
},
cache: 'no-cache'
});
if(!response.ok){
console.log(response.statusText);
}
return response.json();
}
async function getChannelData(slug: string){
const encodedSlug = encodeURIComponent(slug as string);
const apiUrl = process.env.NEXT_PUBLIC_API_URL
const response = await fetch(apiUrl+`/api/channel/${encodedSlug}`, {
headers: {
'Cache-Control': 'no-cache'
},
cache: 'no-cache'
});
if(!response.ok){
console.log(response.statusText);
}
return response.json();
}
export default Page;
|
